<template>
	<view>
		<!-- 步骤条 -->
		<view class="step ns-margin-top ns-padding-top ns-padding-bottom ns-margin-bottom">
			<view class="step-title">
				<view class="ns-font-size-sm" :class="index >= 0 ? 'ns-text-color' : 'ns-text-color-gray'">买家申请退款</view>
				<view class="ns-font-size-sm" :class="index >= 1 ? 'ns-text-color' : 'ns-text-color-gray'">商家处理退款申请</view>
				<view class="ns-font-size-sm" :class="index >= 2 ? 'ns-text-color' : 'ns-text-color-gray'">退款完成</view>
			</view>
			<view class="step-icon">
				<view class="num" :class="index >= 0 ? 'base-color' : 'grey'">1</view>
				<view class="num" :class="index >= 1 ? 'base-color' : 'grey'">2</view>
				<view class="num" :class="index >= 2 ? 'base-color' : 'grey'">3</view>
				<view class="line" :style="'left:' + position[index].left">
					<view class="red"></view>
					<view class="grey"></view>
				</view>
			</view>
		</view>

		<view v-if="detail.refund_status == 0 || detail.refund_status == -3">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						<text class="ns-text-color">*</text>
						<text class="ns-font-size-sm">处理方式：</text>
					</view>
					<view class="uni-list-cell-db">
						<picker @change="changeMode" :value="mode.selected" :range="mode.array" range-key="name">
							<view class="uni-input ns-font-size-sm">{{ mode.array[mode.selected].name }}</view>
						</picker>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						<text class="ns-text-color">*</text>
						<text class="ns-font-size-sm">退款原因：</text>
					</view>
					<view class="uni-list-cell-db">
						<picker @change="changeReason" :value="reason.selected" :range="reason.array" range-key="name">
							<view class="uni-input ns-font-size-sm">{{ reason.array[reason.selected].name }}</view>
						</picker>
					</view>
				</view>
			</view>
			<view v-if="refundMoney > 0">
				<view class="form-input">
					<view class="label">
						<text class="ns-text-color">*</text>
						退款金额：
					</view>
					<input class="uni-input" type="digit" :placeholder="'最多可退款' + refundMoney + '元'" v-model="dataForm.refund_require_money" />
				</view>
			</view>
			<view v-if="reason.selected == 4">
				<view class="uni-title uni-common-pl ns-font-size-sm">退款说明：</view>
				<view class="uni-textarea">
					<textarea class="ns-font-size-sm ns-padding ns-border-color-gray" placeholder="请输入退款说明" v-model="textareaContent" auto-height />
				</view>
			</view>
			<button type="primary" @click="btnSave()" class="confirm">提交退款申请</button>
		</view>

		<view class="ns-padding ns-margin" v-else-if="detail.refund_status == 1">
			<view class="ns-font-size-lg uni-bold ns-margin-top">等待商家处理退款申请</view>
			<view class="ns-text-color-gray">如果商家同意，退款申请将达成并原路退款或者线下退款</view>
		</view>

		<!--已收到货 begin-->
		<view v-else-if="detail.refund_status == 2" class="ns-padding ns-margin">
			<view class="ns-font-size-lg uni-bold ns-margin-bottom">请退货并填写物流信息</view>
			<view class="ns-margin-bottom">
				<view class="uni-bold">1、请退货</view>
				<view class="ns-font-size-sm">请退货未经卖家同意，请不要使用到付或平邮。</view>
				<view class="ns-font-size-sm" v-if="shopInfo.shop_address != ''">
					退货地址：{{ shopInfo.shop_address }} {{ shopInfo.seller_name }} {{ shopInfo.seller_mobile }} {{ shopInfo.seller_zipcode }}
				</view>
				<view class="ns-font-size-sm" v-else>该商家暂未配置收货地址</view>
			</view>
			<view class="ns-margin-bottom">
				<view class="uni-bold">2、请填写退货物流信息</view>
				<view class="ns-font-size-sm ns-text-color-gray uni-bold">（逾期未填写，退货申请将关闭）</view>
				<view class="send ns-padding-top">
					<view class="ns-font-size-sm">
						<text class="ns-text-color">*</text>
						物流公司：
					</view>
					<input class="uni-input" type="text" v-model="logisticsCompany" />
				</view>
				<view class="send ns-padding-top">
					<view class="ns-font-size-sm">
						<text class="ns-text-color">*</text>
						运单号：
					</view>
					<input class="uni-input" type="text" v-model="expressNo" />
				</view>
			</view>
			<button type="primary" @click="ExpressSave()" class="confirm">提交</button>
		</view>

		<view class="ns-margin ns-padding" v-else-if="detail.refund_status == 3">
			<view class="ns-font-size-lg uni-bold ns-margin-top">等待商家收货</view>
			<view class="ns-text-color-gray">如果商家同意，退款申请将达成并退款至您的支付宝账号或银行卡中</view>
		</view>
		<!--等待卖家同意退款 begin-->

		<view class="ns-margin ns-padding" v-else-if="detail.refund_status == 4"><view class="uni-bold ns-font-size-lg">您已成功申请退款，等待卖家处理退款申请</view></view>

		<view class="ns-padding ns-margin" v-else-if="detail.refund_status == 5">
			<view class="ns-font-size-lg uni-bold ns-margin-top">退款成功</view>
			<view class="ns-text-color-gray">退款成功时间：{{ detail.refund_time }}</view>
			<view v-if="detail.refund_real_money > 0">
				<text class="ns-text-color uni-bold">{{ detail.refund_real_money }}</text>
				元通过{{ detail.refund_type_name }}已退还
			</view>
			<view v-if="detail.refund_balance_money > 0">
				<text class="ns-text-color uni-bold">{{ detail.refund_balance_money }}</text>
				元已退还到余额
			</view>
		</view>
		<!--卖家拒绝 begin-->

		<view class="ns-margin ns-padding" v-else-if="detail.refund_status == -1"><view class="uni-bold ns-font-size-lg">卖家拒绝您的退款申请</view></view>

		<view class="ns-margin ns-padding" v-else-if="detail.refund_status == -2"><view class="uni-bold ns-font-size-lg">退款已关闭</view></view>
		
		<ns-login ref="login" href = 'refund_detail'></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		nsLogin
	},
	data() {
		return {
			index: 0,
			dataForm: {
				order_id: 0,
				order_goods_id: 0,
				refund_type: 1,
				refund_require_money: '',
				refund_reason: ''
			},
			reason: {
				selected: 0,
				array: [
					{
						name: '买/卖双方协商一致'
					},
					{
						name: '买错/多买/不想要'
					},
					{
						name: '商品质量问题'
					},
					{
						name: '未收到货品'
					},
					{
						name: '其他'
					}
				]
			},
			mode: {
				selected: 0,
				array: [
					{
						name: '我要退款，但不退货',
						value: 1
					}
				]
			},
			position: [
				{
					left: '-75%'
				},
				{
					left: '-25%'
				},
				{
					left: '0px'
				}
			],
			orderGoodsId: 0,
			info: '',
			detail: [],
			refundMoney: '',
			freight: [],
			shopInfo: [],
			textareaContent: '',
			logisticsCompany: '',
			expressNo: ''
		};
	},
	onLoad(e) {
		this.orderGoodsId = e.order_goods_id;
	},
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;

		if (this.orderGoodsId != 0) {
			this.getRefundDetail();
			this.dataForm.refund_reason = this.reason.array[0].name;
		}
	},
	mixins: [http],
	methods: {
		getRefundDetail() {
			this.sendRequest({
				url: 'System.Order.refundDetail',
				data: {
					order_goods_id: this.orderGoodsId
				},
				success: res => {
					this.info = res.data;
					if (this.info != '') {
						this.detail = this.info.refund_detail;
						this.detail.refund_time = this.$util.timeStampTurnTime(this.detail.refund_time);
						this.dataForm.order_id = this.detail.order_id;
						this.dataForm.order_goods_id = this.detail.order_goods_id;
						if (this.detail.shipping_status != 0 && this.detail.shipping_status != 3 && this.detail.is_virtual == 0) {
							this.mode.array[1] = {
								name: '我要退款，并且退货',
								value: 2
							};
						}
						this.refundMoney = this.info.total_refund_money;
						this.freight = this.info.freight;

						if (this.detail.refund_status == -3) {
							this.dataForm.refund_require_money = this.refundMoney;
							this.reason.selected = 4;
							// for(var i = 0;i<this.reason.array.length;i++){
							// 	if(this.reason.array[i].name == this.detail.refund_reason){
							// 		this.reason.selected = i
							// 	}
							// }
						}

						if (this.detail.refund_status == '') {
							this.index = 0;
						} else if (this.detail.refund_status == 0) {
							this.index = 0;
						} else if (this.detail.refund_status == 5) {
							this.index = 2;
						} else if (this.detail.refund_status < 0) {
							this.index = 1;
						} else {
							this.index = 1;
						}

						this.getShopInfo();
					}
				}
			});
		},
		getShopInfo() {
			this.sendRequest({
				url: 'System.Shop.shopOrderReturnSet',
				success: res => {
					this.shopInfo = res.data;
				}
			});
		},
		changeMode: function(e) {
			let index = e.target.value;
			this.mode.selected = index;
			this.dataForm.refund_type = this.mode.array[index].value;
		},
		changeReason: function(e) {
			let index = e.target.value;
			this.reason.selected = index;
			this.dataForm.refund_reason = this.reason.array[index].name;
		},
		btnSave() {
			var num2 = parseFloat(this.refundMoney);
			if (this.dataForm.refund_require_money == '' && this.dataForm.refund_require_money !== 0) {
				this.$util.showToast({
					title: '请输入退款金额'
				});
				return;
			}
			if (this.dataForm.refund_require_money >= 0) {
				if (this.dataForm.refund_require_money < 0 || this.dataForm.refund_require_money > num2) {
					this.$util.showToast({
						title: '超出可退款金额范围'
					});
					return;
				}
			}
			if (this.dataForm.refund_reason == '其他' || this.dataForm.refund_reason == '') {
				this.dataForm.refund_reason = this.textareaContent;
				if (this.dataForm.refund_reason == '') {
					this.$util.showToast({
						title: '请输入退款说明'
					});
					return;
				}
			}
			this.sendRequest({
				url: 'System.Order.applyOrderRefund',
				data: this.dataForm,
				success: res => {
					if (res.data > 0) {
						this.$util.showToast({
							title: '操作成功'
						});
						setTimeout(res => {
							this.getRefundDetail();
						}, 1500);
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		},
		ExpressSave() {
			if (this.logisticsCompany == '') {
				this.$util.showToast({
					title: '请填写你的快递公司'
				});
				return;
			}
			if (this.expressNo == '') {
				this.$util.showToast({
					title: '请填写你的快递单号'
				});
				return;
			}
			this.sendRequest({
				url: 'System.Order.orderRefund',
				data: {
					order_id: this.dataForm.order_id,
					order_goods_id: this.dataForm.order_goods_id,
					refund_express_company: this.logisticsCompany,
					refund_shipping_no: this.expressNo
				},
				success: res => {
					if (res.data > 0) {
						this.$util.showToast({
							title: '申请退款成功'
						});
						setTimeout(() => {
							this.$util.redirectTo('/pages/member/index/index', {}, 'tabbar');
						}, 1500);
					} else {
						this.$util.showToast({
							title: '申请退款失败'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.send {
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	view {
		width: 23%;
	}
	input {
		width: 76%;
		height: 42rpx;
		font-size: $ns-font-size-sm;
		padding: 0;
	}
}

// 步骤条
.base-color {
	background: $base-color;
}

.grey {
	background: darken($ns-bg-color-gray, 20%);
}

.step-title {
	margin: 0 60rpx;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}

.step-icon {
	margin: 0 60rpx;
	display: flex;
	justify-content: space-between;
	position: relative;
	overflow: hidden;

	.line {
		position: absolute;
		width: 200%;
		height: 4rpx;
		display: flex;
		top: 18rpx;
		z-index: 1;
		transition: left 0.8s;

		.red {
			width: 50%;
			height: 100%;
			background: $base-color;
		}

		.grey {
			width: 50%;
			height: 100%;
			background: darken($ns-bg-color-gray, 20%);
		}
	}

	.num {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		transition: background 0.8s;
		line-height: 40rpx;
		text-align: center;
		color: #fff;
		font-weight: bold;
		z-index: 99;
	}
}

.form-input {
	display: flex;
	justify-content: space-between;

	.label {
		line-height: 80rpx;
		padding: 0 0 0 30rpx;
		font-size: $ns-font-size-sm;
	}

	input {
		width: 500rpx;
		padding: 14rpx 34rpx;
		font-size: $ns-font-size-sm;
		height: 52rpx;
	}
}
.confirm {
	margin-top: 40rpx;
}
.uni-textarea textarea {
	border-bottom: 2rpx solid;
	border-top: 2rpx solid;
}
</style>
